<template>
  <div id="embedBox">
    <div class="bg-color-black">
      <div class="d-flex pt-2 pl-2">
        <span>
          <icon name="chart-bar" class="text-icon" />
        </span>
        <div class="d-flex">
          <span class="fs-xl text mx-2">生产订单计划</span>
        </div>
      </div>
      <div style="margin-top: 10px">
        <!-- canvasEmbed 尺寸-->
        <dv-scroll-board :config="config" style="width:400px;height:250px" />
      </div>
    </div>
  </div>
</template>

<script>
import embedEchart from '@/components/echart/canvasEmbed'
import { currentOrder } from '@/api/current'

export default {
  components: {
    embedEchart,
    currentOrder
  },
  data() {
    return {
      config: {},
      orderData: {},
      orderCurrentData: {},
      timing2: null
    }
  },
  watch: {
    orderData: {
      handler(newdata) {
        this.config = {
          //  隐藏计划片和剩余时间
          // header: ['订单', '长度', '宽度', '等级', '计划/片', '已完成', '剩余时间/h', '订单状态'],
          header: ['订单', '长度', '宽度', '等级', '已完成', '订单状态'],
          // index: true,
          columnWidth: [50, 60, 60, 60, 80, 80],
          align: ['center', 'center', 'center', 'center', 'center', 'center'],
          data: newdata,
          // data: [
          //   ['1', '1450', '2200', '1st', ' ', '343', ' ', '<span style="color:#00da2f;">生产中</span>'],
          //   ['1', '1450', '2200', '1st', ' ', '343', ' ', '<span style="color:#00da2f;">生产中</span>'],
          //   ['1', '1450', '2200', '1st', ' ', '343', ' ', '<span style="color:#37a2da;">等待</span>'],
          //   ['1', '1450', '2200', '1st', ' ', '343', ' ', '<span style="color:#37a2da;">等待</span>'],
          //   ['1', '1450', '2200', '1st', ' ', '343', ' ', '<span style="color:#37a2da;">等待</span>'],
          //   // [' ',' ',' ',' ',' ',' ',' ',' '],
          // ],
          // 轮播方式 'single'|'page'
          // carousel: 'page',
          // 轮播时间间隔 2000
          waitTime: 4000
        }
      },
      immediate: true
      // deep: true
    }
  },
  mounted() {
    // this.getCurrentOrder(); // todo!!!
    // this.timeFn2();
  },
  beforeDestroy() {
    clearInterval(this.timing2)
  },
  methods: {
    getCurrentOrder() {
      currentOrder().then(response => {
        // this.orderData = this.testFormat(response.rows);
        this.orderCurrentData = response.rows
        this.orderData = this.testFormat(this.orderCurrentData)
      })
    },

    testFormat(data) {
      return data.reduce((acc, cur) => {
        const resultArray = [cur.orderNo, cur.length, cur.width, this.colorMapping(cur), cur.producedQty, this.stateMapping(cur)]
        acc.push(resultArray)
        return acc
      }, [])
    },

    formatData(data) {
      // debugger;
      // ['订单', '长度', '宽度', '等级', '计划/片', '已完成', '剩余时间/h', '订单状态']
      // ['1', '1450','2200','1st',' ','343',' ','<span style="color:#00da2f;">生产中</span>']
      // ['orderNo', 'length', 'width', 'level', '', 'setQty', '', 'orderState']
      // orderState 1 生产中 3 已完成 5 故障 0 等待
      // orderState 排序 [7] => 组装
      return data.reduce((acc, cur) => {
        const found = acc.find(item => item.orderState === cur.orderState)
        // 基本格式
        const resultArray = [cur.specCode, cur.qty, Number(cur.length.toFixed(2)), cur.percent]
        // console.log(cur.length,cur.percent*100);
        const proStateList = [
          { value: 1, name: '生产中' },
          { value: 3, name: '已完成' },
          { value: 5, name: '故障' },
          { value: 0, name: '等待' }
        ]
        if (found) {
          found.data.push(this.combineName(resultArray, cur.bz1, cur.specCode, cur.percent))
          // found.data.push(this.combineName(resultArray,cur.bz1,cur.level,cur.specCode));
        } else {
          // ((cur.bz1)?(cur.bz1):("成品"))
          acc.push({
            orderState: cur.orderState,
            data: [this.combineName(resultArray, cur.bz1, cur.specCode, cur.percent)]
          })
        }
        // this.combineName(resultArray,cur.bz1,cur.level,cur.specCode);
        return acc
      }, [])
    },

    // 等级颜色映射
    colorMapping(row) {
      let color = '#000000'
      let nameMap = ''
      if (row.level === '1') {
        color = 'rgb(176,255,255)'
        nameMap = '1'
      } else if ((row.level === '2') || (row.level === '普通级~2nd')) {
        color = 'rgb(163,254,152)'
        nameMap = '二等'
      } else if ((row.level === '3') || (row.level === '合格级~3rd')) {
        color = 'rgb(108,95,184)'
        nameMap = '三等'
      } else if (row.level === '4') {
        color = 'rgb(255,162,117)'
        nameMap = '4'
      } else if (row.level === '5') {
        color = 'rgb(255,0,0)'
        nameMap = '5'
        // 名称待确定
      } else if (row.level === '6') {
        color = 'rgb(255,176,0)'
        nameMap = '6'
      }
      return '<span style="color:' + color + ';">' + nameMap + '</span>'
    },

    // 状态映射
    stateMapping(row) {
      let stateMap = ''
      let color = '#000000'
      if (row.orderState === 1) {
        color = '#13ce66'
        stateMap = '生产中'
      } else if (row.orderState === 2) {
        color = '#ffba00'
        stateMap = '无目的地可去'
      } else if (row.orderState === 3) {
        color = '#1890ff'
        stateMap = '已完成'
      } else if (row.orderState === 4) {
        color = '#909399'
        stateMap = '循环周期不满足'
      } else if (row.orderState === 5) {
        color = '#ff4949'
        stateMap = '周期故障'
      } else if (row.orderState === 0) {
        color = '#909399'
        stateMap = '等待'
      }
      return '<span style="color:' + color + ';">' + stateMap + '</span>'
    },

    // 订单计划显示包装
    combineName(arr, bz1, code, percent) {
      const codeArr = code.split('*')
      arr[0] = '订单号# ' + codeArr[2] + 'mm [L:' + codeArr[0] + ' W:' + codeArr[1] + ']' + codeArr[3] + '等品'
      arr[3] = (percent * 100).toFixed(2) + '%'
      return arr
    },

    // 生产计划按小时更新
    timeFn2() {
      this.timing2 = setInterval(() => {
        console.log('t6 embed 生产计划')
        this.getCurrentOrder()
      }, 3600000)
    }

  }
}
</script>

<style lang="scss" scoped>

  $box-width: 100%;
  $box-height: 335px - 40px;

  #embedBox {
    padding: 20px 16px;
    height: $box-height;
    width: $box-width;
    border-radius: 5px;

    .bg-color-black {
      height: $box-height - 35px;
      border-radius: 10px;
    }

    .text {
      color: #c3cbde;
    }

    .chart-box {
      margin-top: 16px;
      width: 170px;
      height: 170px;

      .active-ring-name {
        padding-top: 10px;
      }
    }
  }
</style>
